﻿var frameId = 'frame_ID';         //hidden frame id
var jFrame = null;                //hidden frame object
var formId = 'form_ID';           //hidden form id
var jForm = null;                 //hidden form object
var fileMax = 1;                  //maximum number of file to be uploaded
var fileCount = 0;                //file counter
var uploadUrl = "/services/imghotspotupload.ashx";       //where to handle uploaded image

jQuery(document).ready(function() {

    jForm = createForm(formId);            //create hidden form
    jFrame = createUploadIframe(frameId);  //create hidden iframe

    //append hidden form to hidden iframe
    jForm.appendTo('body');
    jForm.attr('target', frameId);          //make form target to iframe

    //bind onchange function to input element
    $("#inp").bind('change', startUpload);
    $('#inpThumb').bind('change', startUploadThumb);
    $('#removeThumb').bind('click', function(e) {
        removeThumbnail();
        e.preventDefault();
    });

    function startUpload() {
        if (jForm != null) {
            jForm.remove();                        //re-create hidden form
            jForm = createForm(formId);
            jForm.appendTo('body');
            jForm.attr('target', frameId);
        }

        var newElement = $(this).clone(true);   //clone input element object
        newElement.bind('change', startUpload);  //bind onchange function. detect iframe changes
        newElement.insertAfter($(this));        //insert clone object to current input element object
        $(this).appendTo(jForm);

        jForm.submit();                         //let's upload the file

        jFrame.unbind('load');
        jFrame.load(function() {        //bind onload function to hidden iframe

            //get response message from hidden iframe
            var myFrame = document.getElementById($(this).attr('name'));
            var response = $(myFrame.contentWindow.document.body).text();

            /*
            * you may handle upload status from reponse message.
            * in this example, upload succeeded if message contains ".gif" , otherwise, alert reponse message
            */
            if (response.indexOf('.gif') != -1 || response.indexOf('.png') != -1 || response.indexOf('.jpg') != -1) { //upload successfully
                $.markItUp({ replaceWith: '[img]' + response + '[/img]' });
                $('#div-upload').hide();
            } else {  //error
                alert(response);
            }
        });
    }

    function startUploadThumb() {
        if (jForm != null) {
            jForm.remove();                        //re-create hidden form
            jForm = createForm(formId);
            jForm.appendTo('body');
            jForm.attr('target', frameId);
        }

        var newElement = $(this).clone(true);   //clone input element object
        newElement.bind('change', startUploadThumb);  //bind onchange function. detect iframe changes
        newElement.insertAfter($(this));        //insert clone object to current input element object
        $(this).appendTo(jForm);

        jForm.submit();                         //let's upload the file

        jFrame.unbind('load');
        jFrame.load(function() {        //bind onload function to hidden iframe

            //get response message from hidden iframe
            var myFrame = document.getElementById($(this).attr('name'));
            var response = $(myFrame.contentWindow.document.body).text();

            /*
            * you may handle upload status from reponse message.
            * in this example, upload succeeded if message contains ".gif" , otherwise, alert reponse message
            */
            if (response.indexOf('.gif') != -1 || response.indexOf('.png') != -1 || response.indexOf('.jpg') != -1) { //upload successfully
                //reload image

                $('#thumb').removeAttr('src');
                $('#thumb').attr('src', response).load(function() { $(this).show() });
                $('#hid_thumb').val(response);
            } else {  //error
                alert(response);
            }
        });
    }


});

function removeThumbnail() {
    $('#thumb').removeAttr('src');
    $('#thumb').hide();
    $('#hid_thumb').val('');
}

function createUploadIframe(id) {
    return $('<iframe width="300" height="200" name="' + id + '" id="' + id + '"></iframe>')
    .css({ display: 'none'})
    .appendTo('body');
}

function createForm(formId) {
    return $('<form method="post" action="' + uploadUrl + '" name="' + formId + '" id="' + formId +
    '" enctype="multipart/form-data" style="display: none;">' +
    '</form>');
}
    